<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" >
                        <div class="wl-content-group">
                            <Input v-model="sel_info" placeholder="Enter something..." style="width: 300px;margin-right: 10px"/>
                            <Button class="wl-content-button" type="primary" @click="select_info(sel_info)">查询</Button>
                            <Button type="primary"  class="wl-content-button"  @click="addCarInfo">添加</Button>
                            <Button type="primary">删除</Button>
                        </div>
                    </Col>
                    <Col span="24">
                    <Table border ref="selection" :loading="loading" :columns="tableOptions.tableHead"
                           :data="tableOptions.tableData">
                        <template slot-scope="{ row}" slot="xingming">
                            <strong @click="update(row)"  style="color: dodgerblue">{{ row.name }}</strong>
                        </template>
                    </Table>
                    <Modal
                            v-model="modal1"
                            title="添加人员"
                            @on-ok="okadd(formItem1)"
                            @on-cancel="canceladd">
                        <template>
                            <Form :model="formItem1"  :label-width="100">
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="姓名">
                                            <Input v-model="formItem1.name"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="所属单位">
                                            <Input v-model="formItem1.dirver_work_unit"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="人员类型">
                                            <Input v-model="formItem1.type"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="性别">
                                            <Select v-model="formItem1.sex">
                                                <Option value="1">女</Option>
                                                <Option value="0">男</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="身份证号">
                                            <Input v-model="formItem1.idcard"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="出生日期">
                                            <FormItem prop="date">
                                                <DatePicker type="date" placeholder="Select date" v-model="formItem1.date" ></DatePicker>
                                            </FormItem>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="省份">
                                            <Select v-model="formItem1.shengfen">
                                                <Option value="1">辽宁省</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="城市">
                                            <Select v-model="formItem1.chengshi">
                                                <Option value="1">沈阳</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="所在区域">
                                            <Select v-model="formItem1.quyu">
                                                <Option value="1">沈北新区</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="家庭地址">
                                            <Input v-model="formItem1.address"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="固定电话">
                                            <Input v-model="formItem1.tel"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="移动电话">
                                            <Input v-model="formItem1.mobile"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="年龄">
                                            <Input v-model="formItem1.age"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="电子邮箱">
                                            <Input v-model="formItem1.email"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </template>
                    </Modal>
                    <Modal
                            v-model="modal2"
                            title="编辑人员信息"
                            @on-ok="ok"
                            @on-cancel="cancel">
                        <template>
                            <Form :model="formItem"  :label-width="100">
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="姓名">
                                            <Input v-model="formItem.name"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="所属单位">
                                            <Input v-model="formItem.dirver_work_unit"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="人员类型">
                                            <Input v-model="formItem.type"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="性别">
                                            <Select v-model="formItem.sex">
                                                <Option value="1">女</Option>
                                                <Option value="0">男</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="身份证号">
                                            <Input v-model="formItem.idcard"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="出生日期">
                                            <FormItem prop="date">
                                                <DatePicker type="date" placeholder="Select date" v-model="formItem.date" ></DatePicker>
                                            </FormItem>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="省份">
                                            <Select v-model="formItem.shengfen">
                                                <Option value='1'>辽宁省</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="城市">
                                            <Select v-model="formItem.chengshi">
                                                <Option value='1'>沈阳</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="所在区域">
                                            <Select v-model="formItem.quyu">
                                                <Option value='1'>沈北新区</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="家庭地址">
                                            <Input v-model="formItem.address"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="固定电话">
                                            <Input v-model="formItem.tel"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="移动电话">
                                            <Input v-model="formItem.mobile"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row :gutter=10>
                                    <Col span="12">
                                        <FormItem label="年龄">
                                            <Input v-model="formItem.age"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="电子邮箱">
                                            <Input v-model="formItem.email"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </template>
                    </Modal>
                    </Col>
                </Row>

        <Row type="flex" justify="space-between" class="wl-footer">
            <Col span="14">
                <Button  @click="handleSelectAll(true)" class="wl-content-button">全选</Button>
                <Button @click="handleSelectAll(false)">取消</Button>
            </Col>
            <Col span="10">
                <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
            </Col>
        </Row>
            </template>
        </wl-content-top>
    </div>
</template>
<script>
import WlContentTop from '../../../../components/wl-content-top/wl-content-top'
import { staff, staffadd, staffselect } from '../../../../api/platform'

export default {
  components: { WlContentTop },
  data () {
    return {
      selectmsg: '',
      tableOptions: {
        tableHead: [
          {
            width: '120px',
            align: 'center',
            type: 'selection'
          },
          {
            title: '姓名',
            slot: 'xingming'
          },
          {
            title: '身份证号',
            key: 'idcard'
          },
          {
            title: '移动电话',
            key: 'mobile'
          },
          {
            title: '联系电话',
            key: 'tel'
          },
          {
            title: '人员类别',
            key: 'type'
          }
        ],
        tableData: []
      },
      loading: false,
      param: {
        page: 1

      },
      pageOptions: {
        totalRecord: 0
      },
      modal1: false,
      modal2: false,
      data1: [
        {
          title: '一级',
          expand: true,
          children: [
            {
              title: '二级',
              expand: true,
              children: [
                {
                  title: '三级--1'
                },
                {
                  title: '三级--2'
                }
              ]
            }
          ]
        },
        {
          title: '一级',
          expand: true,
          children: [
            {
              title: '二级',
              expand: true,
              children: [
                {
                  title: '三级--1'
                },
                {
                  title: '三级--2'
                }
              ]
            }
          ]
        }

      ],
      formItem: {
        name: '',
        sex: '',
        date: '',
        address: '',
        dirver_work_unit: '',
        type: '',
        idcard: '',
        mobile: '',
        tel: '',
        age: '',
        email: '',
        shengfen: '',
        chengshi: '',
        quyu: ''
      },
      formItem1: {
        name: '',
        sex: '',
        date: '',
        address: '',
        dirver_work_unit: '',
        type: '',
        idcard: '',
        mobile: '',
        tel: '',
        age: '',
        email: '',
        shengfen: '',
        chengshi: '',
        quyu: ''
      }
    }
  },
  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    pageSizeChange () {},
    update (row) {
      this.modal2 = true
      console.log(row.sex)
      this.formItem.name = row.name
      this.formItem.address = row.address
      this.formItem.dirver_work_unit = row.dirver_work_unit
      this.formItem.type = row.type
      this.formItem.idcard = row.idcard
      this.formItem.mobile = row.mobile
      this.formItem.tel = row.tel
      this.formItem.age = row.age
      this.formItem.email = row.email
      this.formItem.sex = '1'
      this.formItem.date = row.birthday
      this.formItem.chengshi = '1'
      this.formItem.shengfen = '1'
      this.formItem.quyu = '1'
    },
    getList () {
      this.loading = true
      staff(this.param).then(ret => {
        this.loading = false
        this.tableOptions.tableData = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    selectsj (e) {
      staffselect({ keyword: e, unit_id: 1 }).then(ret => {
        this.tableOptions.tableData = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    add () {
      this.modal1 = true
    },
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    okadd (e) {
      staffadd({ address: e.address }).then(ret => {

      })
    },
    canceladd () {
      this.$Message.info('Clicked cancel')
    }

  },
  watch: {
    treeSelectData (value) {
      console.log(value, '---')
      this.param.unit_id = value.id
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
    .page{
        height: 100%;
    }
    .wl-content-group{
        margin-bottom: 10px;
    }
    .wl-content{
        margin-bottom: 10px;
        &-group{
            margin: 10px;
        }
        &-button{
            margin-right: 10px;
        }
    }
</style>
